<template>
    <a-row :gutter="[4, 4]">
        <a-col :span="24">
            <a-row align="middle" :gutter="[8, 8]">
                <a-col :offset="2"></a-col>
                <a-col :span="10" style="text-align: center"> 标题 </a-col>
                <a-col :span="10" style="text-align: center"> 值 </a-col>
            </a-row>
        </a-col>
        <a-col :span="24">
            <a-list
                item-layout="vertical"
                size="small"
                :pagination="pagination"
                :data-source="data"
            >
                <template #renderItem="{ item, index }">
                    <a-row
                        align="middle"
                        :gutter="[8, 8]"
                        style="margin: 5px 0px"
                    >
                        <a-col :span="2" style="text-align: center">
                            <edit-outlined class="ml-icon" @click="editMore" />
                        </a-col>
                        <a-col :span="10">
                            <a-input v-model:value="item['label']"></a-input>
                        </a-col>
                        <a-col :span="10">
                            <a-input v-model:value="item['value']"> </a-input>
                        </a-col>
                        <a-col :span="2" style="text-align: center">
                            <a class="ml-a-danger">
                                <delete-outlined
                                    @click="value.splice(index, 1)"
                                />
                            </a>
                        </a-col>
                    </a-row>
                </template>
            </a-list>
        </a-col>
        <a-col :offset="2" :span="20" style="text-align: center">
            <a-button block @click="add">
                <plus-circle-outlined />
            </a-button>
        </a-col>
    </a-row>
</template>

<script lang="ts">
import { cloneDeep } from "lodash-es";
import {
    ref,
    defineComponent,
    computed,
    PropType,
    UnwrapRef,
    reactive,
} from "vue";
import {
    EditOutlined,
    DeleteOutlined,
    PlusCircleOutlined,
} from "@ant-design/icons-vue";
import { TableColumnType } from "ant-design-vue";

interface DataItem {
    dataIndex: string;
    title: string;
}

export default defineComponent({
    components: {
        EditOutlined,
        DeleteOutlined,
        PlusCircleOutlined,
    },
    props: {
        value: {
            type: Object as PropType<TableColumnType[]>,
            default: () => [],
        },
    },
    setup(props, { emit }) {
        const pagination = {
            onChange: (page: number) => {},
            pageSize: 10,
            hideOnSinglePage: true,
        };

        const visibleEdit = ref(false);
        const editMore = () => {
            visibleEdit.value = true;
        };

        const data = computed({
            get: () => props.value,
            set: (val) => emit("value", val),
        });

        const add = () => {
            data.value.push({ label: "", value: "" });
        };

        return {
            data,

            visibleEdit,
            pagination,
            editMore,

            add,
        };
    },
});
</script>

<style lang="less" scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>